<template>
	<view class="bg-white">
		<mescroll-body ref="mescrollRef" :botthousandsSeparatortombar="false" @init="mescrollInit" @down="downCallback"
			@up="upCallback">
			<view class="u-subsection-box">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="changeJifen"
					active-color="#FE572A"></u-tabs>
			</view>
			<view class="bg"
				:style="{ background: 'url('+$_BASE_IMG_API+'/images/integralbg.png)  no-repeat','background-size': '100% 100%'}">
				<view class="position-relative flex">
					<view class="position-relative flex flex-column align-center flex-1">
						<text class="u-p-t-20 u-font-30" style="color:#f3e9db">积分单价</text>
						<text
							class="u-p-t-20 font-weight-bold u-font-40 text-white">{{thousandsSeparator(score_price,false) || '0.00'}}</text>
					</view>
					<view class="position-relative flex flex-column align-center flex-1">
						<text class="u-p-t-20 u-font-30" style="color:#f3e9db">可用积分</text>
						<text
							class="u-p-t-20 font-weight-bold u-font-40 text-white">{{(type == 8 ? thousandsSeparator(userInfo.credit8,false) : thousandsSeparator(userInfo.credit9,false)) || '0.00'}}</text>
					</view>

				</view>
				<view class="position-relative flex align-center justify-around u-m-t-30">
					<view @click="openPassword(1)" class="font-24 font-weight-bold text-center"
						style="width:160rpx;height:60rpx;border-radius:30rpx;color:#DA3000;background-color:#fff;line-height:60rpx;">
						<view>提现</view>
					</view>
					<view @click="openPassword(2)" class="font-24 font-weight-bold text-center"
						style="width:160rpx;height:60rpx;border-radius:30rpx;color:#DA3000;background-color:#fff;line-height:60rpx;">
						充值
					</view>
					<view class="font-24 font-weight-bold text-center"
						style="width:160rpx;height:60rpx;border-radius:30rpx;color:#DA3000;background-color:#fff;line-height:60rpx;"
						@click="transferShow=true">
						转换记账点
					</view>
				</view>
			</view>
			<view class="u-m-t-40 u-m-x-30 flex justify-between align-center" style="color:#333333;">
				<text class="font-32 font-weight-bold">积分明细</text>
			</view>
			<view class="u-m-t-20 rounded-10" v-if="infoList.length>0">
				<view class="u-p-x-30 u-p-y-20 bg-white">
					<block v-for="(item,index) in infoList" :key="index">
						<view class="flex align-center justify-between u-p-y-20 u-border-bottom">
							<view class="flex flex-column" style="width: 80%;">
								<text>{{item.remark}}</text>
								<text class="text-greey u-p-t-20">{{item.createtime}}</text>
							</view>
							<text>{{item.num}}</text>
						</view>
					</block>
				</view>
			</view>
		</mescroll-body>
		<u-popup v-model="transferShow" mode="bottom" :safe-area-inset-bottom="true" :closeable="true"
			border-radius="30">
			<view class="font-32 font-weight-bold u-m-t-50 text-center" style="color:#333333">积分转换记账点</view>
			<view class="u-p-x-30" style="margin-top:100rpx">
				<u-input v-model="money" :custom-style="{ 'background-color': '#FAFAFA', 'padding-left': '20rpx' }"
					placeholder="请输入积分数"></u-input>
			</view>
			<u-button hover-class="none" shape="circle"
				:custom-style="{ 'background-color': '#FE572A', 'margin': '170rpx 30rpx 40rpx 30rpx', 'color': '#fff' }"
				@click="transfer">转换记账点</u-button>
		</u-popup>
		<u-popup v-model="successShow" mode="center" border-radius="30">
			<view class="u-p-x-30 u-p-y-50" style="width:600rpx">
				<image style="display:block; margin: 0 auto; width: 80rpx; height: 80rpx;"
					src="../static/mine/entry-suc.png"></image>
				<view class="font-32 font-weight-bold text-center u-m-t-30" style="color:#333333">转换成功！</view>
				<u-button hover-class="none" shape="circle"
					:custom-style="{ 'background-color': '#FE572A', 'color': '#fff', 'margin-top': '80rpx'}"
					@click="successShow=false">确定</u-button>
			</view>
		</u-popup>
		<u-popup v-model="withdrawShow" mode="bottom" :safe-area-inset-bottom="true" :closeable="true"
			border-radius="30">
			<view class="font-32 font-weight-bold u-m-t-50 text-center" style="color:#333333">提现</view>
			<view class="u-p-x-20">
				<u-form :model="form" ref="uForm" label-width="140">
					<u-form-item label="钱包地址"><u-input v-model="formData.address" placeholder="请输入钱包地址" /></u-form-item>
					<u-form-item label="提现数量"><u-input v-model="formData.num" placeholder="请输入提现数量"
							type="number" /></u-form-item>
					<u-form-item label="提现类型">
						<u-radio-group v-model="formData.type">
							<u-radio v-for="(item, index) in list" :key="index"
								:name="item.type">{{ item.name }}</u-radio>
						</u-radio-group>
					</u-form-item>
				</u-form>
			</view>
			<u-button hover-class="none" shape="circle"
				:custom-style="{ 'background-color': '#FE572A', 'margin': '40rpx 30rpx', 'color': '#fff' }"
				@click="withdraw">提现</u-button>
		</u-popup>
		<u-popup v-model="topUpShow" mode="bottom" :safe-area-inset-bottom="true" :closeable="true" border-radius="30">
			<view class="font-32 font-weight-bold u-m-t-50 text-center" style="color:#333333">充值</view>
			<view class="u-p-x-30 flex align-center justify-center flex-column" style="margin-top:40rpx">
				<u-image width="300rpx" height="300rpx" :src="topUpInfo.image"></u-image>
				<view class="u-m-y-20">{{topUpInfo.address}}</view>
			</view>
			<u-button hover-class="none" shape="circle"
				:custom-style="{ 'background-color': '#FE572A', 'margin': '40rpx 30rpx', 'color': '#fff' }"
				@click="topUp">复制地址</u-button>
		</u-popup>
		<dy-pass-popup ref="passPopup" @confirm="passConfirm"></dy-pass-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		MineCenterApi
	} from '@/api/serves.js'
	import {
		thousandsSeparator
	} from "@/common/utils/utils.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				thousandsSeparator,
				infoList: [],
				transferShow: false,
				successShow: false,
				withdrawShow: false,
				topUpShow: false,
				money: "",
				score_price: '0.00',
				type: 8, // 8：消费积分 ， 9：奖励积分
				list: [{
					type: 8,
					name: '消费积分'
				}, {
					type: 9,
					name: '奖励积分'
				}, ],
				payType: 1, // 1 : 提现 2 ：支付
				topUpInfo: {
					image: "",
					address: "",
				},
				formData: {
					address: '',
					num: '',
					type: 8,
					paypwd: '',
					hash: ''
				},
				form: {},
				current: 0
			}
		},
		onShow() {
			this.$store.dispatch('user/getUserInfo')
			console.log("getUserInfo-------------------", this.userInfo);
			this.getMineCenter()
		},
		methods: {
			// 下拉刷新回掉
			downCallback() {
				this.mescroll.resetUpScroll()
				this.getMineCenter()
			},
			// 上拉加载
			upCallback(page) {
				MineCenterApi.Ccdetails({
					type: this.type,
					page: page.num
				}).then(res => {
					console.log('积分明细', res);
					if (res.code == 1) {
						let result = res.data
						if (page.num == 1) this.infoList = []; //如果是第一页需手动制空列表
						this.infoList = this.infoList.concat(result); //追加新数据
						setTimeout(() => {
							this.mescroll.endByPage(result.length, result.totalpage)
							uni.hideLoading();
						}, 20)
					} else {
						this.$Toast(res.msg)
						this.mescroll.endErr()
					}
				})
			},
			// 转换申请
			transfer() {
				if (!this.money) return this.$Toast('请输入积分数')
				let from_coin = this.type == 8 ? 'credit8' : 'credit9'
				MineCenterApi.transfer({
					to_coin: 'credit4',
					from_coin: from_coin,
					money: this.money
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.transferShow = false
						this.successShow = true
						this.downCallback() // 刷新积分记录
						this.$store.dispatch('user/getUserInfo') // 刷新剩余积分
					} else {
						this.$Toast(res.msg)
						this.mescroll.endErr()
					}
				})
			},
			//获取单价
			getMineCenter() {
				MineCenterApi.getConfig({}).then((res) => {
					console.log(res.data.data.score_price, "获取单价");
					this.score_price = res.data.data.score_price
				})
			},
			// 切换积分类型
			changeJifen(e) {
				this.current = e
				this.type = e === 0 ? 8 : 9 // 8：消费积分 ， 9：奖励积分
				MineCenterApi.Ccdetails({
					type: this.type,
					page: 1
				}).then(res => {
					console.log('积分明细', res);
					if (res.code == 1) {
						let result = res.data
						this.infoList = []; //如果是第一页需手动制空列表
						this.infoList = result; //追加新数据
						setTimeout(() => {
							this.mescroll.endByPage(result.length, result.totalpage)
							uni.hideLoading();
						}, 20)
					} else {
						this.$Toast(res.msg)
						this.mescroll.endErr()
					}
				})
			},
			passConfirm(password) {
				this.formData.paypwd = password
				if (this.payType === 1) {
					MineCenterApi.submitPointsWithdrawal(this.formData).then(res => {
						this.$Toast(res.msg)
						if (res.code == 1) {
							this.downCallback()
						}
					})
				}
				this.$refs.passPopup.close()
			},
			openPassword(type) {
				this.payType = type
				if (type === 1) {
					this.withdrawShow = true
				} else {
					this.topUpShow = true
					MineCenterApi.submitPointsRecharge().then(result => {
						if (result.data) {
							this.topUpInfo = result.data
						} else {
							this.topUpInfo = {
								image: "",
								address: ""
							}
						}
					})
				}
			},
			withdraw() {
				this.withdrawShow = true
				this.$refs.passPopup.open()
			},
			topUp() {
				// this.topUpShow = false
				// this.$refs.passPopup.open()
				// MineCenterApi.submitPointsRecharge().then(result=>{
				// 	uni.showToast({
				// 		title:result.msg
				// 	})
				// })
				this.$copy(this.topUpInfo.address)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 750rpx;
		height: 250rpx;
	}
</style>